<template>
  <div>
    <el-card class="box-card" style="margin-top: 20px">
      <el-table :data="tableData" border="" style="width: 100%" v-loading="loading">
        <el-table-column type="selection" width="50" />
        <el-table-column label="章节名称" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.courseName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="editor(5,scope.row)" v-if="scope.row.courseType == 1">编辑</el-button>
            <el-button size="mini" type="text" @click="editor(5,scope.row)" v-if="scope.row.courseType == 2">编辑</el-button>
            <el-button size="mini" type="text" style="color: red" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="courseClassName" label="课程大类" align="center" />
        <el-table-column prop="courseParentName" label="父级课程" align="center" />
        <el-table-column label="课程类型" align="center" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.courseType == 1">课程</span>
            <span v-else>章节</span>
          </template>
        </el-table-column>
        <el-table-column label="课程状态" align="center" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.courseStatus == 0">禁用</span>
            <span v-else>启用</span>
          </template>
        </el-table-column>
        <el-table-column prop="courseDetail" label="课程简介" align="center" show-overflow-tooltip/>
        <el-table-column prop="courseDetailDescription" label="课程详情" align="center" show-overflow-tooltip/>
        <el-table-column prop="courseChapter" label="章节数" align="center" width="70"/>
        <el-table-column prop="courseDuration" label="课程时长" align="center" width="80"/>
        <el-table-column label="强度" align="center" width="50">
          <template slot-scope="scope">
            <span v-if="scope.row.strengthGrade == 1">低</span>
            <span v-if="scope.row.strengthGrade == 2">中</span>
            <span v-if="scope.row.strengthGrade == 3">高</span>
          </template>
        </el-table-column>
        <el-table-column label="水平" align="center" width="60">
          <template slot-scope="scope">
            <span v-if="scope.row.courseLevel == 1">初级</span>
            <span v-if="scope.row.courseLevel == 2">中级</span>
            <span v-if="scope.row.courseLevel == 3">高级</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="parms.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="parms.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        style="margin-top: 20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-card>  
  </div>
</template>

<script>
import { getList, del } from '@/api/course/standard'
export default {
  props: ['id', 'showDialog'],
  data() {
    return {
      input: '',
      options: '',
      tableData: [],
      total: null,
      parms: {
        pageNum: 1,
        pageSize: 5,
        courseName: '',
        courseStatus: '',
        courseType: 2,
        courseParentId: null
      },
      loading: false,
      dialogVisible: false,
      cid: null
    }
  },
  created() {
    this.getList()
  },
  methods: {
    editor(val,obj) {
      this.$emit('handCancle', obj)
      console.log(val)
    },
    del(id) {
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      }).then(() => {
        del(id).then(res => {
          if(res.code === 200) {
            this.$message.success('删除成功')
            this.getList()
          }
        })
      }).catch(() => {});
    },
    getList() {
      this.loading = true
      this.parms.courseParentId = this.id
      getList(this.parms.pageNum, this.parms.pageSize, this.parms.courseName, this.parms.courseStatus, this.parms.courseType, this.parms.courseParentId).then(res => {
        this.tableData = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.parms.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.parms.pageNum = val
      this.getList()
    }
  },
  watch: {
    showDialog: function(n, o) {
      if (n) {
        console.log(this.id)
        this.parms.courseParentId = this.id
        this.getList() 
      }
    }
  }
}
</script>

<style>
.flex{
  display: flex;
  justify-content: space-between;
}
.el-table th.gutter {
  display: table-cell !important
}
</style>
